<template>
  <page-header-wrapper>
    <a-card :bordered='false'>
      <div class='table-operator'>
        <a-button type='primary' icon='plus' @click='handleEdit()' v-action:addMenu>新建</a-button>
      </div>
      
      <a-table ref='table' :columns='columns' :data-source='tableData' rowKey='id' :loading='loading'>
        <span slot='icon' slot-scope='text'>
          <a-icon :type='text' />
        </span>
        <span slot='actions' slot-scope='actions, record'>
          <a-tag color='cyan' v-for='action in actions' :key='`action_${action.id}`' @click='editPermission(action)'>{{
              action.name
            }}</a-tag>
          <a-tag style='background: #fff; ' @click='addPermission(record.id)' v-action:addPermission><a-icon
            type='plus' /> 新增权限</a-tag>
        </span>
        
        <template slot='handler' slot-scope='text, record'>
          <a-button style='margin-right: 8px;' @click='handleEdit(record)' v-action:updateMenu>编辑</a-button>
          <a-button type='danger' @click='handleDelete(record)' v-action:deleteMenu>删除</a-button>
        </template>
      </a-table>
    </a-card>
    <a-modal title='Title' :visible='editVisible' width='40%' @ok='handleSubmit' @cancel='handleClose'>
      <a-form-model ref='editForm' :model='editForm' :labelCol='{ span: 6 }' :wrapperCol='{ span: 14 }'>
        <a-form-model-item
          label='父级分类'
          prop='parent_id'
          :rules="{ required: true, message: '请选择父级分类', trigger: 'change' }"
        >
          <a-select v-model='editForm.parent_id' placeholder='请选择父级分类'>
            <a-select-option :value='0'>顶级分类</a-select-option>
            <a-select-option :value='item.id' v-for='item in tableData' :key='`tableData${item.id}`'>
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label='菜单名称'
          prop='title'
          :rules="{ required: true, message: '请输入菜单名称', trigger: 'blur' }"
        >
          <a-input v-model='editForm.title' />
        </a-form-model-item>
        <a-form-model-item
          label='前端页面路由'
          prop='path'
          :rules="{ required: true, message: '请输入前端页面路由', trigger: 'blur' }"
        >
          <a-input v-model='editForm.path' />
        </a-form-model-item>
        <a-form-model-item label='页面唯一值' prop='name'>
          <a-input v-model='editForm.name' />
        </a-form-model-item>
        <a-form-model-item
          label='前端组件地址'
          prop='component'
          :rules="{ required: true, message: '请输入前端组件地址', trigger: 'blur' }"
        >
          <a-input v-model='editForm.component' />
        </a-form-model-item>
        <a-form-model-item label='重定向地址' prop='redirect'>
          <a-input v-model='editForm.redirect' />
        </a-form-model-item>
        <a-form-model-item label='ICON' prop='icon'>
          <a-icon :type='editForm.icon' style='margin-right: 8px' v-if='editForm.icon' />
          <a-button @click='handleIconChangeModel'>选择图标</a-button>
        </a-form-model-item>
        <a-form-model-item label='是否显示子菜单'>
          <a-radio-group v-model='editForm.hide_children_in_menu'>
            <a-radio :value='1'>
              是
            </a-radio>
            <a-radio :value='0'>
              否
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label='排序' prop='sorting'>
          <a-input v-model='editForm.sorting' />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    
    <a-modal title='Title' :visible='permissionVisble' @ok='handleOk' @cancel='handleClose'>
      <a-form-model ref='permissionForm' :model='permissionForm' :labelCol='{ span: 6 }' :wrapperCol='{ span: 14 }'>
        <a-form-model-item
          label='权限名称'
          prop='name'
          :rules="{ required: true, message: '请输入权限名称', trigger: 'change' }"
        >
          <a-input v-model='permissionForm.name' />
        </a-form-model-item>
        <a-form-model-item
          label='请求地址'
          prop='request_url'
          :rules="{ required: true, message: '请输入请求地址', trigger: 'change' }"
        >
          <a-input v-model='permissionForm.request_url' />
        </a-form-model-item>
        <a-form-model-item
          label='请求方式'
          prop='method'
          :rules="{ required: true, message: '请选择请求方式', trigger: 'change' }"
        >
          <a-select v-model='permissionForm.method' placeholder='请选择请求方式'>
            <a-select-option :value='method' v-for='(method, index) in methods' :key='`method_${index}`'>
              {{ method }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label='权限标识'
          prop='action'
          :rules="{ required: true, message: '请输入权限标识', trigger: 'change' }"
        >
          <a-input v-model='permissionForm.action' />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    
    <a-modal title='选择icon' :visible='selectIconModel' @ok='handleIconChangeModel' @cancel='handleIconClose'>
      <icon-selector v-model='editForm.icon' @change='handleIconChange' />
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import {
  PermissionAdd,
  PermissionUpdate,
  PermissionDestory,
  MenuList,
  MenuAdd,
  MenuUpdate,
  MenuDestory
} from '@/api/admin'
import IconSelector from '@/components/IconSelector'

const columns = [
  {
    title: '菜单名称',
    dataIndex: 'title',
    width: '160px'
  },
  {
    title: '前端页面路由',
    dataIndex: 'path',
    width: '160px'
  },
  {
    title: '组件名称',
    dataIndex: 'component',
    width: '160px'
  },
  {
    title: '重定向地址',
    dataIndex: 'redirect',
    width: '160px'
  },
  {
    title: 'ICON',
    dataIndex: 'icon',
    scopedSlots: { customRender: 'icon' },
    width: '100px'
  },
  {
    title: '权限',
    dataIndex: 'actions',
    scopedSlots: { customRender: 'actions' }
  },
  {
    title: '排序',
    dataIndex: 'sorting',
    width: '100px'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'handler' },
    width: '200px'
  }
]

const methods = ['GET', 'POST', 'PUT', 'DELETE']
// const actions = [
//   {
//     action: 'select',
//     val: '查询'
//   },
//   {
//     action: 'update',
//     val: '编辑'
//   },
//   {
//     action: 'add',
//     val: '新增'
//   },
//   {
//     action: 'delete',
//     val: '删除'
//   },
//   {
//     action: 'export',
//     val: '导出'
//   }
// ]

export default {
  name: 'TableList',
  components: {
    IconSelector
  },
  data() {
    this.columns = columns
    this.methods = methods
    // this.actions = actions
    return {
      loading: false,
      queryParam: {},
      tableData: [],
      selectedRowKeys: [],
      selectedRows: [],
      editVisible: false,
      roleVisible: false,
      editForm: {
        hide_children_in_menu: 0,
        sorting: 99
      },
      permissionVisble: false,
      permissionForm: {},
      selectIconModel: false
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    onLoad() {
      this.loading = true
      MenuList({})
        .then(res => {
          this.loading = false
          this.tableData = res.data
        })
        .finally(() => {
          this.loading = false
        })
    },
    resetSearchForm() {
      this.queryParam = {}
      this.$refs.table.refresh(true)
    },
    handleEdit(row) {
      this.editVisible = true
      this.editForm = Object.assign(this.editForm, row)
    },
    handleSubmit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          if (this.editForm.id) {
            MenuUpdate(this.editForm.id, this.editForm).then(res => this.success(res))
          } else {
            MenuAdd(this.editForm).then(res => this.success(res))
          }
        }
      })
    },
    success(res) {
      this.$notification.success({ message: res.msg })
      this.editVisible = false
      this.permissionVisble = false
      this.onLoad()
    },
    handleClose() {
      this.editVisible = false
      this.permissionVisble = false
      this.editForm = {
        hide_children_in_menu: 0,
        sorting: 99
      }
      this.permissionForm = {}
    },
    handleDelete(row) {
      const _this = this
      _this.$confirm({
        title: '警告',
        content: (
          <span>
            此操作不可恢复，确定要删除 <a-tag color='cyan'>{row.title}</a-tag> 吗？
          </span>
        ),
        onOk() {
          MenuDestory(row.id).then(res => _this.success(res))
        }
      })
    },
    addPermission(id) {
      this.permissionForm.menu_id = id
      this.permissionVisble = true
    },
    editPermission(item) {
      if (!this.$auth('updatePermission')) {
        return
      }
      this.permissionForm = Object.assign({}, item)
      this.permissionVisble = true
    },
    handleOk() {
      this.$refs.permissionForm.validate(valid => {
        if (valid) {
          // this.permissionForm.name = this.actions.find(_ => _.action === this.permissionForm.action).val
          if (this.permissionForm.id) {
            PermissionUpdate(this.permissionForm.id, this.permissionForm).then(res => this.success(res))
          } else {
            PermissionAdd(this.permissionForm).then(res => this.success(res))
          }
        }
      })
    },
    handleIconChangeModel() {
      this.selectIconModel = !this.selectIconModel
    },
    handleIconChange(icon) {
      this.editForm.icon = icon
    },
    handleIconClose(){
      this.selectIconModel = false
    }
  }
}
</script>
